<%@page import="com.jhs.kjs.model.UserModel"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/top.jsp" %>
<LINK href="${cssUrl }/admin.css" rel="stylesheet" type="text/css">
<form id="userForm" name="userForm" method="post">
	<div class="sub">
		<div class="sub_left">
			<div class="left_tit">
				<img src="${imgUrl}/left_tit.jpg" border="0" />
			</div>
			<ul>
				<c:forEach var = "menu" items="${menuList}">
					<li><a href="#" onClick="goBoardListMain(<c:out value="${menu.menuIndex}" />)"><c:out value="${menu.menuName}" /></a></li>				
				</c:forEach>
			</ul>
		</div>
		<div class="sub_content">
			<div class="title">
				<div class="tit">
					<img src="${imgUrl}/mypage_tit.jpg" border="0"/>					
				</div>
				<div class="home">HOME > <font color="#4a7ed5">마이페이지</font></div>
			</div>
			<div class="content">
				<div class="bg_top"></div>
				<div class="mypage">
				<table border="0" cellspacing="0" cellpadding="0" width="677" align="center" id="tab1">
						<tr>
							<td align="left" colspan="2">
							<table border="0" cellspacing="0" cellpadding="0">
								<tr>
									<td width="24" align="left"><img src="${imgUrl}/my_icon.jpg" border="0" /></td>
									<td class="tabmenu"><a href="javascript:tab(1);"><font color="#0066b4">마이</font>페이지</a></td>
									<td width="20" align="center">|</td>
									<td class="tabmenu"><a href="javascript:tab(2);"><font color="#999999">포인트 충전내역</font></a></td>
									<td width="20" align="center">|</td>
									<td class="tabmenu"><a href="javascript:tab(3);"><font color="#999999">포인트 사용내역</font></a></td>
								</tr>
							</table>
							</td>
						</tr>
						<tr>
							<td height="11"></td>
						</tr>
						<tr>
							<td height="1" bgcolor="#d6d6d6" colspan="2"></td>
						</tr>
						<tr>
							<td class="t1" width="130" height="32" bgcolor="#fafafa">아이디</td>
							<td class="c1"><input type="text" readonly value="<c:out value="${user.userId }"/>"/></td>
						</tr>
						<tr>
							<td height="1" bgcolor="#e4e4e4" colspan="2"></td>
						</tr>
						<tr>
							<td class="t1" width="130" height="32" bgcolor="#fafafa">패스워드</td>
							<td class="c1"><input type="password" id="userPw" name="userPw"/></td>
						</tr>
						<tr>
							<td height="1" bgcolor="#e4e4e4" colspan="2"></td>
						</tr>
						<tr>
							<td class="t1" width="130" height="32" bgcolor="#fafafa">패스워드 확인</td>
							<td class="c1"><input type="password" id="userPw2" name="userPw2"/></td>
						</tr>
						<tr>
							<td height="1" bgcolor="#e4e4e4" colspan="2"></td>
						</tr>
						<tr>
							<td class="t1" width="130" height="32" bgcolor="#fafafa">이름</td>
							<td class="c1"><input type="text" id="userName" name="userName" value="<c:out value="${user.userName }"/>"/></td>
						</tr>
						<tr>
							<td height="1" bgcolor="#e4e4e4" colspan="2"></td>
						</tr>
						<%-- <tr>
							<td class="t1" width="130" height="65" bgcolor="#fafafa">별명</td>
							<td class="c1"><input type="text" id="nickName" name="nickName" value="<c:out value="${user.nickName }"/>"/><br /><font color="#e07677">* 공백없이 한글,영문,숫자만 입력 가능 (한글2자, 영문4자 이상)<br />별명을 바꾸시면 앞으로 60일 이내에는 변경 할 수 없습니다.</font></td>
						</tr>
						<tr>
							<td height="1" bgcolor="#e4e4e4" colspan="2"></td>
						</tr> --%>
						<tr>
							<td class="t1" width="130" height="32" bgcolor="#fafafa">휴대폰번호</td>
							<td class="c1"><select id="cell1" name="cell1" >
							<option <c:if test="${user.cell1=='010' }">selected </c:if>>010</option>
							<option <c:if test="${user.cell1=='011' }">selected </c:if>>011</option>
							<option <c:if test="${user.cell1=='016' }">selected </c:if>>016</option>
							<option <c:if test="${user.cell1=='017' }">selected </c:if>>017</option>
							<option <c:if test="${user.cell1=='018' }">selected </c:if>>018</option>
							<option <c:if test="${user.cell1=='019' }">selected </c:if>>019</option>
							</select> - <input type="text" id="cell2" name="cell2"style="width:40px;" value="<c:out value="${user.cell2 }"/>"/> - <input type="text" id="cell3" style="width:40px;" name="cell3" value="<c:out value="${user.cell3 }"/>"/></td>
						</tr>
						<tr>
							<td height="1" bgcolor="#e4e4e4" colspan="2"></td>
						</tr>
						<tr>
							<td class="t1" width="130" height="32" bgcolor="#fafafa">E-mail</td>
							<td class="c1"><input type="text" id="email" name="email" value="<c:out value="${user.email }"/>"/></td>
						</tr>
						<tr>
							<td height="1" bgcolor="#e4e4e4" colspan="2"></td>
						</tr>
						<%-- <tr>
							<td class="t1" width="130" height="32" bgcolor="#fafafa">메일링서비스</td>
							<td class="c2"><input type="checkbox" id="agreeMailing" name="agreeMailing" <c:if test="${user.agreeMailing==1 }">checked </c:if>/> 정보 메일을 받겠습니다.</td>
						</tr>
						<tr>
							<td height="1" bgcolor="#e4e4e4" colspan="2"></td>
						</tr>
						<tr>
							<td class="t1" width="130" height="32" bgcolor="#fafafa">정보공개</td>
							<td class="c2"><input type="checkbox" id="agreePublicMyInfo" name="agreePublicMyInfo" <c:if test="${user.agreePublicMyInfo==1 }">checked </c:if> /> 다른분들이 나의 정보를 볼 수 있도록 합니다.</td>
						</tr> 
						<tr>
							<td height="1" bgcolor="#e4e4e4" colspan="2"></td>
						</tr>--%>
						<tr>
							<td class="t1" width="130" height="72" bgcolor="#fafafa">자동등록방지</td>
							<td class="c3"><img id="spamFilterImg" src="${imgUrl}/capcha/<c:out value='${spamFree }'/>.png" border="0" style="vertical-align:middle;"/> <input type="text" id="secureCode" name="secureCode" /> <a href="#" onclick="reloadSpam()">새로고침</a></td>
						</tr>
						<tr>
							<td height="1" bgcolor="#e4e4e4" colspan="2"></td>
						</tr>
					</table>

					<table border="0" cellspacing="0" cellpadding="0" width="677" align="center" id="tab2" style="display:none;">
						<tr>
							<td align="left" colspan="2">
							<table border="0" cellspacing="0" cellpadding="0">
								<tr>
									<td width="24" align="left"><img src="${imgUrl}/my_icon.jpg" border="0" /></td>
									<td class="tabmenu"><a href="javascript:tab(1);"><font color="#999999">마이페이지</font></a></td>
									<td width="20" align="center">|</td>
									<td class="tabmenu"><a href="javascript:tab(2);"><font color="#0066b4">포인트</font> 충전내역</a></td>
									<td width="20" align="center">|</td>
									<td class="tabmenu"><a href="javascript:tab(3);"><font color="#999999">포인트 사용내역</font></a></td>
								</tr>
							</table>
							</td>
						</tr>
						<tr>
							<td height="11"></td>
						</tr>
						<tr>
							<td>
							<table width="100%" bgcolor="#d9d9d9" border="0" cellspacing="0" cellpadding="0">
								<tr>
									<td height="1" bgcolor="#3f8bc9" colspan="7"></td></tr>
								<tr>
									<td width="25%" align="center" class="top_blue3" bgcolor="#eff3fa">번호</td>
									<td width="25%" align="center" class="top_blue3" bgcolor="#eff3fa">아이디</td>
									<td width="25%" align="center" class="top_blue3" bgcolor="#eff3fa">적립포인트</td>
									<td width="25%" align="center" class="top_blue3" bgcolor="#eff3fa">포인트적립일</td>
								</tr>								
								<tr>
									<td height="1" bgcolor="#e4e4e4" colspan="4"></td>
								</tr>
							</table>
							<table width="100%" bgcolor="#d9d9d9" border="0" cellspacing="0" cellpadding="0" id="tbl_buy">
								<tr>
									<td align="center" class="list_dark" bgcolor="#ffffff">3</td>
									<td align="center" class="list_dark" bgcolor="#ffffff"><a href="#">test</a></td>
									<td align="center" class="list_dark" bgcolor="#ffffff">test</td>
									<td align="center" class="list_dark" bgcolor="#ffffff">2014-08-22 18:23:56</td></tr>
								<tr>
									<td height="1" bgcolor="#e4e4e4" colspan="4"></td>
								</tr>								
							</table>
							</td>
						</tr>
					</table>

					<table border="0" cellspacing="0" cellpadding="0" width="677" align="center" id="tab3" style="display:none;">
						<tr>
							<td align="left" colspan="2">
							<table border="0" cellspacing="0" cellpadding="0">
								<tr>
									<td width="24" align="left"><img src="${imgUrl}/my_icon.jpg" border="0" /></td>
									<td class="tabmenu"><a href="javascript:tab(1);"><font color="#999999">마이페이지</font></a></td>
									<td width="20" align="center">|</td>
									<td class="tabmenu"><a href="javascript:tab(2);"><font color="#999999">포인트 충전내역</font></a></td>
									<td width="20" align="center">|</td>
									<td class="tabmenu"><a href="javascript:tab(3);"><font color="#0066b4">포인트</font> 사용내역</a></td>
								</tr>
							</table>
							</td>
						</tr>
						<tr>
							<td height="11"></td>
						</tr>
						<tr>
							<td>
							<table width="100%" bgcolor="#d9d9d9" border="0" cellspacing="0" cellpadding="0">
								<tr>
									<td height="1" bgcolor="#3f8bc9" colspan="7"></td></tr>
								<tr>
									<td width="25%" align="center" class="top_blue3" bgcolor="#eff3fa">번호</td>
									<td width="25%" align="center" class="top_blue3" bgcolor="#eff3fa">아이디</td>
									<td width="25%" align="center" class="top_blue3" bgcolor="#eff3fa">사용포인트</td>
									<td width="25%" align="center" class="top_blue3" bgcolor="#eff3fa">포인트적립일</td>
								</tr>
								<tr>
									<td height="1" bgcolor="#e4e4e4" colspan="4"></td>
								</tr>
							</table>
							<table width="100%" bgcolor="#d9d9d9" border="0" cellspacing="0" cellpadding="0" id="tbl_use">
								<tr>
									<td align="center" class="list_dark" bgcolor="#ffffff">3</td>
									<td align="center" class="list_dark" bgcolor="#ffffff"><a href="#">test</a></td>
									<td align="center" class="list_dark" bgcolor="#ffffff">test</td>
									<td align="center" class="list_dark" bgcolor="#ffffff">2014-08-22 18:23:56</td></tr>
								<tr>
									<td height="1" bgcolor="#e4e4e4" colspan="4"></td>
								</tr>
							</table>
							</td>
						</tr>
					</table>
				</div>
				<div class="bg_bottom"></div>
				<div class="btn" id="button">
					<a href="#" onclick="sendUserInfo();"><img src="${imgUrl}/my_btn_ok.jpg" border="0" /></a>
					<a href="/home"><img src="${imgUrl}/my_btn_no.jpg" border="0" /></a>
				</div>
			</div>
		</div>
	</div></form>	
<script type="text/javascript">
function sendUserInfo(){
	var minimumPw = '<%=UserModel.minimumPw %>';
	minimumPw*=1;
	minimumPw = minimumPw||7;
	
	
	if($('#userPw').val().trim()==''){
		alert('비밀번호를 넣어주세요.');
		return;
	}
	if($('#userPw').val().trim().length<minimumPw){
		alert('비밀번호를 최소 '+minimumPw+' 자리이상 넣어주세요.');
		return;
	}
	if($('#userPw').val()!=$('#userPw2').val()){
		alert('비밀번호가 일치하지 않습니다.');
		return;
	}
	if($('#userName').val().trim()==''){
		alert('이름을 넣어주세요.');
		return;
	}
	if($('#userName').val().trim()==$('#userPw').val()){
		alert('아이디와 패쓰워드가 동일합니다.');
		return;
	}
	if($('#email').val().trim()==''){
		alert('E-mail을 넣어주세요.');
		return;
	}
	var agreeBoolean = 0;
	if($('#agreeMailing').val() == 'on'){
		agreeBoolean=1;
	}
	$('#agreeMailing').val(agreeBoolean);
	agreeBoolean=0;
	if($('#agreePublicMyInfo').val() == 'on'){
		agreeBoolean=1;
	}
	$('#agreePublicMyInfo').val(agreeBoolean);
	var $form = $('#userForm');
	$form.attr('action', '/user/memberUpdate');
	$form.submit();
}



var reloadSpam = function(){

	var url="/user/reloadSpamFilter.json";
	
	AjaxPost(url, function(data){
		$('#spamFilterImg').attr('src','${imgUrl}/capcha/'+data.spamFree+'.png');			
	});
};
function tab(no){
	$("#tab1,#tab2,#tab3,#button").css('display','none');
	$("#tab"+no).show();
	
	if(no == 1) {
		$("#button").show();
	} 
}

function showTable(type) {
	
	$("#mypage").hide();
	$("#button").hide();
	$("#buyTotal").hide();
	$("#useTotal").hide();
	$("#pagenation").hide();
	$("#pagenationUse").hide();
	switch(type) {
		case 1:
			$("#mypage").show();
			$("#button").show();
			break;
		case 2:
			$("#buyTotal").show();
			$("#pagenation").show();
			break;
		case 3:
			$("#useTotal").show();
			$("#pagenationUse").show();
			break;
	}
	
}

var pagingDTO={};
pagingDTO.userId = '<c:out value="${user.userId }"/>';
var markerSetting={
		'buy':{},
		'use':{}
};
markerSetting['buy']= {
  		paging:{}
  };
markerSetting['use']= {
  		paging:{}
  };
var _this = this;
$(function() {
  	_this.buyPoint = tableSync('tbl_buy');
  	_this.usePoint = tableSync('tbl_use');
  	init();
	buyTbl();
	useTbl();
	});
	
function init() {
		markerSetting['buy'].paging.page = 1;
	markerSetting['buy'].paging.totalPage ='<c:out value="${buyTotal}"/>';
	markerSetting['buy'].paging.nowSeq = 1;
	markerSetting['buy'].paging.userId = '<c:out value="${user.userId }"/>';
	
	markerSetting['use'].paging.page = 1;
	markerSetting['use'].paging.totalPage ='<c:out value="${useTotal}"/>';
	markerSetting['use'].paging.nowSeq = 1;
	markerSetting['use'].paging.userId = '<c:out value="${user.userId }"/>';
}
	
var pagingUseDTO={};
pagingUseDTO.userId = '<c:out value="${user.userId }"/>';
	
var buyTbl = function(start){
  	var url='/admin/memberViewPointBuy.json';
//   	pagingDTO.start = start||0;
	var html = "";
	AjaxPost(url, markerSetting['buy'].paging, function(data){
	//jsonLog(data.buyPoint);
		$.each(data.buyPoint,function(index, value){
			if(index > 10) {
				return;
			}
			value.pointRegiTime = formatter.dateFormatYYYYMMDDHHMMSS2(new Date(value.pointRegiTime));
			html += "<tr>";
			html += "	<td align='center' class='list_dark' bgcolor='#ffffff' width='25%'>"+value.seq+"</td>";
			html += "	<td align='center' class='list_dark' bgcolor='#ffffff' width='25%'>"+value.userId+"</td>";
			html += "	<td align='center' class='list_dark' bgcolor='#ffffff' width='25%'>"+value.point+"</td>";
			html += "	<td align='center' class='list_dark' bgcolor='#ffffff' width='25%'>"+value.pointRegiTime+"</td></tr>";
			html += "<tr>";
			html += "	<td height='1' bgcolor='#e4e4e4' colspan='4'></td>";
			html += "</tr>";
		});
		$("#tbl_buy").html(html);
		//_this.buyPoint.tableAutoSync(data.buyPoint);
		markerSetting['buy'].paging.totalPage= data.buyTotal;
		//makePaging();
	});
};
var useTbl = function(start){
  	var url='/admin/memberViewPointUse.json';
//   	pagingUseDTO.start = start||0;
	var html = "";
	AjaxPost(url, markerSetting['use'].paging, function(data){
	//jsonLog(data.usePoint);
	
		$.each(data.usePoint,function(index, value){
			if(index > 10) {
				return;
			}
			value.pointRegiTime = formatter.dateFormatYYYYMMDDHHMMSS2(new Date(value.pointRegiTime));
			html += "<tr>";
			html += "	<td align='center' class='list_dark' bgcolor='#ffffff' width='25%'>"+value.seq+"</td>";
			html += "	<td align='center' class='list_dark' bgcolor='#ffffff' width='25%'>"+value.userId+"</td>";
			html += "	<td align='center' class='list_dark' bgcolor='#ffffff' width='25%'>"+value.point+"</td>";
			html += "	<td align='center' class='list_dark' bgcolor='#ffffff' width='25%'>"+value.pointRegiTime+"</td></tr>";
			html += "<tr>";
			html += "	<td height='1' bgcolor='#e4e4e4' colspan='4'></td>";
			html += "</tr>";		
		});
		//_this.usePoint.tableAutoSync(data.usePoint);
		$("#tbl_use").html(html);
		markerSetting['use'].paging.totalPage= data.useTotal;
		//makeUsePaging();
	});
};




function makePaging() {
	$('#pagenation').html("");
		var totalPage = markerSetting['buy'].paging.totalPage;
		var nowPage = markerSetting['buy'].paging.page;
		var html='';
		var setFunctionName='';
		var index=(nowPage-3);
		var indexCount=0;
		
		var endPage = totalPage / 3;
		if (totalPage % 3 > 0) {
			endPage = endPage + 1;
		}
		if(index>1){
			html+='<a onclick="changePaging(1,\'before\''+')" onFocus=this.blur()><img src="${imgUrl }/btn_first.jpg"/ alt=처음 align=absmiddle style="/cursor:hand;/"></a>';
			html+='<a onclick="changePaging('+index+',\'before\''+')" onFocus=this.blur()><img src="${imgUrl }/btn_prev.jpg"/  alt=이전 align=absmiddle style="/cursor:hand;/"></a>&nbsp;&nbsp;';
		}
// 		debugger;
//		//logs('totalPage/20 = '+totalPage/20);
		for(;index<=endPage;index++){
			if((index)==nowPage){
				setFunctionName='';
			}else{
				setFunctionName=' onclick="changePaging('+index+')"';
			}
			
			if(index>0){
					
				if(index == nowPage) {
					html+='<a '+setFunctionName+'><b>'+index+'</b></a>&nbsp;';
				} else {
					html+='<a '+setFunctionName+' style=cursor:hand;>'+index+'</a>&nbsp;';
				}	
				
				indexCount++;
			}
			if(indexCount>2){
				html+='<a onclick="changePaging('+index+',\'after\''+')" onFocus=this.blur()><img src="${imgUrl }/btn_next.jpg"/  alt=다음 align=absmiddle style="/cursor:hand;/"></a>';
				html+='<a onclick="changePaging('+totalPage+',\'after\''+')" onFocus=this.blur()><img src="${imgUrl }/btn_last.jpg"/  alt=맨끝 align=absmiddle style="/cursor:hand;/"></a>';
				break;
			}
			
		}
		$('#pagenation').html(html);
}

function changePaging(index, option){
		if(option==null){
			logs(', index = '+index);
			
			markerSetting['buy'].paging.page=index;
			markerSetting['buy'].paging.start=0;
			markerSetting['buy'].paging.end=0;
			buyTbl();
		}else{
			if(option=='before'){
				var next = index-9;
				while(next<=0){
					next++;
				}
				logs('next = '+next+', index = '+index);
				markerSetting['buy'].paging.page=next;
				markerSetting['buy'].paging.start=0;
				markerSetting['buy'].paging.end=0;
				buyTbl();
			}else if(option=='after'){
				var next = index+9;
				while(next>=(markerSetting['buy'].paging.totalPage/10)+1){
					next--;
				}
				logs('next = '+next+', index = '+index);
				markerSetting['buy'].paging.page=next;
				markerSetting['buy'].paging.start=0;
				markerSetting['buy'].paging.end=0;
				buyTbl();
			}
		}
	}
	
	
	

function makeUsePaging() {
	$('#pagenationUse').html("");
		var totalPage = markerSetting['use'].paging.totalPage;
		var nowPage = markerSetting['use'].paging.page;
		var html='';
		var setFunctionName='';
		var index=(nowPage-3);
		var indexCount=0;
		
		var endPage = totalPage / 3;
		if (totalPage % 3 > 0) {
			endPage = endPage + 1;
		}
		if(index>1){
			html+='<a onclick="changeUsePaging(1,\'before\''+')" onFocus=this.blur()><img src="${imgUrl }/btn_first.jpg"/ alt=처음 align=absmiddle style="/cursor:hand;/"></a>';
			html+='<a onclick="changeUsePaging('+index+',\'before\''+')" onFocus=this.blur()><img src="${imgUrl }/btn_prev.jpg"/  alt=이전 align=absmiddle style="/cursor:hand;/"></a>&nbsp;&nbsp;';
		}
// 		debugger;
//		//logs('totalPage/20 = '+totalPage/20);
		for(;index<=endPage;index++){
			if((index)==nowPage){
				setFunctionName='';
			}else{
				setFunctionName=' onclick="changeUsePaging('+index+')"';
			}
			
			if(index>0){
					
				if(index == nowPage) {
					html+='<a '+setFunctionName+'><b>'+index+'</b></a>&nbsp;';
				} else {
					html+='<a '+setFunctionName+' style=cursor:hand;>'+index+'</a>&nbsp;';
				}	
				
				indexCount++;
			}
			if(indexCount>2){
				html+='<a onclick="changeUsePaging('+index+',\'after\''+')" onFocus=this.blur()><img src="${imgUrl }/btn_next.jpg"/  alt=다음 align=absmiddle style="/cursor:hand;/"></a>';
				html+='<a onclick="changeUsePaging('+totalPage+',\'after\''+')" onFocus=this.blur()><img src="${imgUrl }/btn_last.jpg"/  alt=맨끝 align=absmiddle style="/cursor:hand;/"></a>';
				break;
			}
			
		}
		$('#pagenationUse').html(html);
}

function changeUsePaging(index, option){
		if(option==null){
			logs(', index = '+index);
			
			markerSetting['use'].paging.page=index;
			markerSetting['use'].paging.start=0;
			markerSetting['use'].paging.end=0;
			useTbl();
		}else{
			if(option=='before'){
				var next = index-9;
				while(next<=0){
					next++;
				}
				logs('next = '+next+', index = '+index);
				markerSetting['use'].paging.page=next;
				markerSetting['use'].paging.start=0;
				markerSetting['use'].paging.end=0;
				useTbl();
			}else if(option=='after'){
				var next = index+9;
				while(next>=(markerSetting['use'].paging.totalPage/10)+1){
					next--;
				}
				logs('next = '+next+', index = '+index);
				markerSetting['use'].paging.page=next;
				markerSetting['use'].paging.start=0;
				markerSetting['use'].paging.end=0;
				useTbl();
			}
		}
	}
	
function goBoardListMain(type) {
	// type = 1 공지사항
		// type = 2 최신판례
		// type = 3 최신법령
		// type = 4 A항목
		// type = 5 B항목
		// type = 6 C항목
		// type = 7 D항목
		// type = 8 E항목
		// type = 9 F항목
		// type = 10 G항목
		// type = 11 H항목
		$("#menuIndex").val(type);
		var url = "/board/boardListMain";	
		$("#frm").attr("action", url);
		$("#frm").submit();
		
		return false;
 }
</script>

<form name="frm" id="frm" method="post" style="display:none;">
	<input type="hidden" name="menuIndex" id="menuIndex">
</form>
<%@ include file="/WEB-INF/views/include/bottom.jsp" %>